<template>
    <div class="userid-login">
        <div class="userid-login-top border">
            <div class="ul-t-left f-l-r" @click="goBack()"><el-icon class="back-icon"><ArrowLeftBold /></el-icon>返回</div>
            <div class="ul-t-center">登录</div>
            <div class="ul-t-right" @click="goToRegister()">注册</div>
        </div>
        <div class="userid-login-content">
            <div class="ul-c-top">
                <div class="ul-c-t-userid w100 center">
                    <input type="text" class="user_input border" placeholder="账号" v-model="userInfo.userId" @keyup.enter="userLoginById">
                </div>
                <div class="ul-c-t-password w100 center">
                    <input type="password" name="" class="user_input border" placeholder="密码" v-model="userInfo.password" @keyup.enter="userLoginById">
                </div>
                <div class="ul-c-t-loginBtn w100 center">
                    <button native-type="submit" class="btn user_btn" @click.prevent="userLoginById()">登录</button>
                </div>
                <div class="ul-c-t-agreement p_color">
                    <input type="checkbox" class="ul-c-t_checkbox" v-model="userInfo.agree">同意
                    <a>服务协议</a> 和 <a>隐私政策</a>
                </div>
                <div class="ul-c-t-forgotPwd">
                    <span class="p_color" @click.prevent="goToForgotPwd">忘记密码？</span>
                </div>
            </div>
            <div class="ul-c-bottom" v-if="isShowOtherLogin">
                <span class="ul-c-b_otherLogin p_color">其他登录</span>
                <div class="ul-c-b_otherLoginBtn">
                    <img src="/src/assets/email.png" alt="" @click="goToEmailLogin()">
                </div>
            </div>
        </div>
    </div>
    <error-alert :message="errorMessage" ref="showErrorAlert"></error-alert>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref, watch } from 'vue'
import { useRouter } from 'vue-router'
import { IUserIdAndPwdModel } from '../user.model'
import overallStore from '@/store/index'

const overallSe = overallStore()
const router = useRouter()
const goToRegister = () => {
    router.replace({
        name: 'register'
    })
}

const goToForgotPwd = () => {
    router.replace({
        name: 'userForgotPassword'
    })
} 

const goBack = () => {
    router.back()
}

// 跳转邮箱登录页
let errorMessage = ref<string>('')
let showErrorAlert = ref<any>(null)
const goToEmailLogin = () => {
    if(!userInfo.agree) {
        errorMessage.value = '请勾选同意服务协议和隐私政策'
        showErrorAlert.value.showErrorAlert()
        return
    }
    router.replace({
        name: 'emailLogin'
    })
}

const userInfo = reactive({
    userId: '',
    password: '',
    agree: false
}) as IUserIdAndPwdModel

// 发起登录请求
const userLoginById = () => {
    if(userInfo.userId === '' || userInfo.password === '') {
        errorMessage.value = '请输入账号或密码'
        showErrorAlert.value.showErrorAlert()
        return
    }
    if(!userInfo.agree) {
        errorMessage.value = '请勾选同意服务协议和隐私政策'
        showErrorAlert.value.showErrorAlert()
        return
    }

    const data = {
        userType: 'U',
        userId: userInfo.userId,
        password: userInfo.password
    }
    overallSe.getLoginByUserId(data).then((res: any) => {
        if(res.status == 'success') {
            overallSe.setUserInfo(res.results, res.token)
            // router.push({ name: 'myInfo' })
            router.back()
        } else {
            if(res.errCode == 'ERR002') {
                errorMessage.value = res.errMessage
                showErrorAlert.value.showErrorAlert()
            }
        }
    })
}

// 移动端软键盘升起时隐藏其他登录方式
let isShowOtherLogin = ref<boolean>(true)
let docmHeight = ref<number>(document.documentElement.clientHeight || document.body.clientHeight)
let showHeight = ref<number>(document.documentElement.clientHeight || document.body.clientHeight)
watch(() => showHeight.value, () => {
    docmHeight.value > showHeight.value ? isShowOtherLogin.value = false : isShowOtherLogin.value = true
})
onMounted(() => {
    window.onresize = () => {
        return (() => {
            showHeight.value = document.documentElement.clientHeight || document.body.clientHeight
        })()
    }
})
</script>

<style lang="less" scoped>
.userid-login {
    width: 100%;
    position: relative;
    background-color: var(--bg-color);

    .userid-login-top {
        width: 100%;
        height: var(--navigation-bar-height);
        border-bottom: 1px solid var(--border-color-gray);
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 1.7rem;

        .ul-t-left, .ul-t-right {
            color: var(--font-color-blue);
        }

        .ul-t-center {
            color: var(--font-color-black);
            font-weight: 600;
        }
    }

    .userid-login-content {
        width: 100%;
        min-height: calc(100vh - 2.5rem);

        .ul-c-top {
            height: 21rem;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            padding: 0 3.7rem;
            .user_input {
                color: var(--font-color-black);
            }

            .user_btn {
                margin-top: 1rem;
            }

            .ul-c-t-agreement{
                font-size: 14px;
                margin-top: 1rem;

                a {
                    color: var(--font-color-black);
                }

                .ul-c-t_checkbox {
                    margin-right: 0.7rem;
                    vertical-align: middle;
                }
            }

            .ul-c-t-forgotPwd {
                margin-top: 1rem;
            }
        }

        .ul-c-bottom {
            position: absolute;
            bottom: 3rem;
            width: 100%;
            height: 3.5rem;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            .ul-c-b_otherLogin {
                font-size: 14px;
                margin-bottom: 0.8rem;
            }
        }
    }
}
</style>